WebGL Clustered Deferred Lighting: การจัดการแสงขั้นสูง

ในขอบเขตของกราฟิก 3 มิติแบบเรียลไทม์ แสงสว่างมีบทบาทสำคัญในการสร้างฉากที่สมจริงและน่าดึงดูดสายตา ในขณะที่แนวทางการเรนเดอร์ไปข้างหน้าแบบดั้งเดิมอาจมีค่าใช้จ่ายในการคำนวณสูงเมื่อมีแหล่งกำเนิดแสงจำนวนมาก การเรนเดอร์แบบดีเฟอร์ (Deferred rendering) นำเสนอทางเลือกที่น่าสนใจ Clustered deferred lighting ก้าวไปอีกขั้น โดยมอบโซลูชันที่มีประสิทธิภาพและปรับขนาดได้สำหรับการจัดการสถานการณ์แสงที่ซับซ้อนในแอปพลิเคชัน WebGL

ทำความเข้าใจ Deferred Rendering

ก่อนที่จะเจาะลึก clustered deferred lighting สิ่งสำคัญคือต้องเข้าใจหลักการพื้นฐานของการเรนเดอร์แบบดีเฟอร์ (Deferred rendering) ซึ่งแตกต่างจากการเรนเดอร์ไปข้างหน้า ซึ่งคำนวณแสงสำหรับแต่ละแฟรกเมนต์ (พิกเซล) เมื่อถูกแรสเตอร์ การเรนเดอร์แบบดีเฟอร์ (Deferred rendering) จะแยกเรขาคณิตและการส่งผ่านแสง นี่คือรายละเอียด:

1. Geometry Pass (การสร้าง G-Buffer): ในการส่งผ่านครั้งแรก เรขาคณิตของฉากจะถูกเรนเดอร์ไปยังเป้าหมายการเรนเดอร์หลายรายการ ซึ่งเรียกรวมกันว่า G-buffer บัฟเฟอร์นี้โดยทั่วไปจะจัดเก็บข้อมูลเช่น:
• ความลึก: ระยะทางจากกล้องไปยังพื้นผิว
• Normals: การวางแนวพื้นผิว
• Albedo: สีฐานของพื้นผิว
• Specular: สีและความเข้มของไฮไลท์ specular
2. Lighting Pass: ในการส่งผ่านครั้งที่สอง G-buffer จะใช้ในการคำนวณการมีส่วนร่วมของแสงสำหรับแต่ละพิกเซล สิ่งนี้ช่วยให้เราสามารถเลื่อนการคำนวณแสงที่มีราคาแพงออกไปได้จนกว่าเราจะมีข้อมูลพื้นผิวที่จำเป็นทั้งหมด

การเรนเดอร์แบบดีเฟอร์ (Deferred rendering) มีข้อดีหลายประการ:

• Reduced Overdraw: การคำนวณแสงจะดำเนินการเพียงครั้งเดียวต่อพิกเซล โดยไม่คำนึงถึงจำนวนแหล่งกำเนิดแสงที่ส่งผลกระทบต่อพิกเซลนั้น
• Simplified Lighting Calculations: ข้อมูลพื้นผิวที่จำเป็นทั้งหมดมีอยู่ใน G-buffer อย่างง่ายดาย ทำให้สมการแสงง่ายขึ้น
• Decoupled Geometry and Lighting: สิ่งนี้ช่วยให้ไปป์ไลน์การเรนเดอร์มีความยืดหยุ่นและเป็นโมดูลาร์มากขึ้น

อย่างไรก็ตาม การเรนเดอร์แบบดีเฟอร์ (Deferred rendering) มาตรฐานยังคงเผชิญกับความท้าทายเมื่อต้องจัดการกับแหล่งกำเนิดแสงจำนวนมาก นี่คือจุดที่ clustered deferred lighting เข้ามามีบทบาท

แนะนำ Clustered Deferred Lighting

Clustered deferred lighting เป็นเทคนิคการเพิ่มประสิทธิภาพที่มีเป้าหมายเพื่อปรับปรุงประสิทธิภาพของการเรนเดอร์แบบดีเฟอร์ (Deferred rendering) โดยเฉพาะอย่างยิ่งในฉากที่มีแหล่งกำเนิดแสงจำนวนมาก แนวคิดหลักคือการแบ่ง view frustum ออกเป็นตารางของคลัสเตอร์ 3 มิติ และกำหนดแสงให้กับคลัสเตอร์เหล่านี้ตามตำแหน่งเชิงพื้นที่ สิ่งนี้ช่วยให้เราสามารถกำหนดได้อย่างมีประสิทธิภาพว่าแสงใดส่งผลกระทบต่อพิกเซลใดระหว่างการส่งผ่านแสง

Clustered Deferred Lighting ทำงานอย่างไร

1. View Frustum Subdivision: View frustum ถูกแบ่งออกเป็นตารางคลัสเตอร์ 3 มิติ ขนาดของตารางนี้ (เช่น 16x9x16) กำหนดความละเอียดของการจัดกลุ่ม
2. Light Assignment: แหล่งกำเนิดแสงแต่ละแหล่งจะถูกกำหนดให้กับคลัสเตอร์ที่มันตัดกัน สามารถทำได้โดยการตรวจสอบปริมาตรขอบเขตของแสงเทียบกับขอบเขตของคลัสเตอร์
3. Cluster Light List Creation: สำหรับแต่ละคลัสเตอร์ รายการของแสงที่ส่งผลกระทบต่อคลัสเตอร์นั้นจะถูกสร้างขึ้น รายการนี้สามารถจัดเก็บไว้ในบัฟเฟอร์หรือพื้นผิว
4. Lighting Pass: ในระหว่างการส่งผ่านแสง สำหรับแต่ละพิกเซล เราจะกำหนดว่าพิกเซลนั้นอยู่ในคลัสเตอร์ใด จากนั้นวนซ้ำแสงในรายการแสงของคลัสเตอร์นั้น สิ่งนี้ช่วยลดจำนวนแสงที่ต้องพิจารณาสำหรับแต่ละพิกเซลอย่างมาก

ประโยชน์ของ Clustered Deferred Lighting

• Improved Performance: โดยการลดจำนวนแสงที่พิจารณาต่อพิกเซล Clustered deferred lighting สามารถปรับปรุงประสิทธิภาพการเรนเดอร์ได้อย่างมาก โดยเฉพาะอย่างยิ่งในฉากที่มีแหล่งกำเนิดแสงจำนวนมาก
• Scalability: ประสิทธิภาพที่เพิ่มขึ้นจะเด่นชัดยิ่งขึ้นเมื่อจำนวนแหล่งกำเนิดแสงเพิ่มขึ้น ทำให้เป็นโซลูชันที่ปรับขนาดได้สำหรับสถานการณ์แสงที่ซับซ้อน
• Reduced Overdraw: เช่นเดียวกับการเรนเดอร์แบบดีเฟอร์ (Deferred rendering) มาตรฐาน Clustered deferred lighting ช่วยลด overdraw โดยทำการคำนวณแสงเพียงครั้งเดียวต่อพิกเซล

การใช้งาน Clustered Deferred Lighting ใน WebGL

การใช้งาน clustered deferred lighting ใน WebGL เกี่ยวข้องกับหลายขั้นตอน นี่คือภาพรวมระดับสูงของกระบวนการ:

1. G-Buffer Creation: สร้างพื้นผิว G-buffer เพื่อจัดเก็บข้อมูลพื้นผิวที่จำเป็น (ความลึก, normals, albedo, specular) โดยทั่วไปแล้วจะเกี่ยวข้องกับการใช้เป้าหมายการเรนเดอร์หลายรายการ (MRT)
2. Cluster Generation: กำหนดตารางคลัสเตอร์และคำนวณขอบเขตของคลัสเตอร์ สามารถทำได้ใน JavaScript หรือโดยตรงใน shader
3. Light Assignment (ฝั่ง CPU): วนซ้ำแหล่งกำเนิดแสงและกำหนดให้กับคลัสเตอร์ที่เหมาะสม โดยทั่วไปจะทำบน CPU เนื่องจากจะต้องคำนวณเฉพาะเมื่อแสงเคลื่อนที่หรือเปลี่ยนแปลงเท่านั้น พิจารณาใช้โครงสร้างการเร่งความเร็วเชิงพื้นที่ (เช่น ลำดับชั้นปริมาตรขอบเขต หรือกริด) เพื่อเพิ่มความเร็วในกระบวนการกำหนดแสง โดยเฉพาะอย่างยิ่งกับแสงจำนวนมาก
4. Cluster Light List Creation (ฝั่ง GPU): สร้างบัฟเฟอร์หรือพื้นผิวเพื่อจัดเก็บรายการแสงสำหรับแต่ละคลัสเตอร์ โอนดัชนีแสงที่กำหนดให้กับแต่ละคลัสเตอร์จาก CPU ไปยัง GPU สามารถทำได้โดยใช้ texture buffer object (TBO) หรือ storage buffer object (SBO) ขึ้นอยู่กับเวอร์ชัน WebGL และส่วนขยายที่มีอยู่
5. Lighting Pass (ฝั่ง GPU): ใช้ shader ส่งผ่านแสงที่อ่านจาก G-buffer กำหนดคลัสเตอร์สำหรับแต่ละพิกเซล และวนซ้ำแสงในรายการแสงของคลัสเตอร์นั้นเพื่อคำนวณสีสุดท้าย

ตัวอย่างโค้ด (GLSL)

นี่คือข้อมูลโค้ดบางส่วนที่แสดงส่วนสำคัญของการใช้งาน หมายเหตุ: เหล่านี้เป็นตัวอย่างที่ง่ายขึ้นและอาจต้องมีการปรับเปลี่ยนตามความต้องการเฉพาะของคุณ

G-Buffer Fragment Shader

#version 300 es

in vec3 vNormal;
in vec2 vTexCoord;

layout (location = 0) out vec4 outAlbedo;
layout (location = 1) out vec4 outNormal;
layout (location = 2) out vec4 outSpecular;

uniform sampler2D uTexture;

void main() {
  outAlbedo = texture(uTexture, vTexCoord);
  outNormal = vec4(normalize(vNormal), 0.0);
  outSpecular = vec4(0.5, 0.5, 0.5, 32.0); // Example specular color and shininess
}

Lighting Pass Fragment Shader

#version 300 es

in vec2 vTexCoord;

layout (location = 0) out vec4 outColor;

uniform sampler2D uAlbedo;
uniform sampler2D uNormal;
uniform sampler2D uSpecular;
uniform sampler2D uDepth;

uniform samplerBuffer uLightListBuffer;
uniform vec3 uLightPositions[MAX_LIGHTS];
uniform vec3 uLightColors[MAX_LIGHTS];

uniform int uClusterGridSizeX;
uniform int uClusterGridSizeY;
uniform int uClusterGridSizeZ;

uniform mat4 uInverseProjectionMatrix;

#define MAX_LIGHTS 256 //Example, needs to be defined and consistent

// Function to reconstruct world position from depth and screen coordinates
vec3 reconstructWorldPosition(float depth, vec2 screenCoord) {
    vec4 clipSpacePosition = vec4(screenCoord * 2.0 - 1.0, depth, 1.0);
    vec4 viewSpacePosition = uInverseProjectionMatrix * clipSpacePosition;
    return viewSpacePosition.xyz / viewSpacePosition.w;
}

// Function to calculate cluster index based on world position
int calculateClusterIndex(vec3 worldPosition) {
    // Transform world position to view space
    vec4 viewSpacePosition = uInverseViewMatrix * vec4(worldPosition, 1.0);

    // Calculate normalized device coordinates (NDC)
    vec3 ndcPosition = viewSpacePosition.xyz / viewSpacePosition.w; //Perspective divide

    //Transform to [0, 1] range
    vec3 normalizedPosition = ndcPosition * 0.5 + 0.5;

    // Clamp to avoid out-of-bounds access
    normalizedPosition = clamp(normalizedPosition, vec3(0.0), vec3(1.0));

    // Calculate the cluster index
    int clusterX = int(normalizedPosition.x * float(uClusterGridSizeX));
    int clusterY = int(normalizedPosition.y * float(uClusterGridSizeY));
    int clusterZ = int(normalizedPosition.z * float(uClusterGridSizeZ));

    // Calculate the 1D index
    return clusterX + clusterY * uClusterGridSizeX + clusterZ * uClusterGridSizeX * uClusterGridSizeY;
}


void main() {
  float depth = texture(uDepth, vTexCoord).r;
  vec3 normal = normalize(texture(uNormal, vTexCoord).xyz);
  vec3 albedo = texture(uAlbedo, vTexCoord).rgb;
  vec4 specularData = texture(uSpecular, vTexCoord);
  float shininess = specularData.a;
  float specularIntensity = 0.5; // simplified specular intensity


  // Reconstruct world position from depth
  vec3 worldPosition = reconstructWorldPosition(depth, vTexCoord);

  // Calculate cluster index
  int clusterIndex = calculateClusterIndex(worldPosition);

  // Determine the start and end indices of the light list for this cluster
    int lightListOffset = clusterIndex * 2; // Assuming each cluster stores start and end indices
    int startLightIndex = int(texelFetch(uLightListBuffer, lightListOffset).r * float(MAX_LIGHTS)); //Normalize light indices to [0, MAX_LIGHTS]
    int numLightsInCluster = int(texelFetch(uLightListBuffer, lightListOffset + 1).r * float(MAX_LIGHTS));


  // Accumulate lighting contributions
  vec3 finalColor = vec3(0.0);
  for (int i = 0; i < numLightsInCluster; ++i) {
        int lightIndex = startLightIndex + i;
        if (lightIndex >= MAX_LIGHTS) break; // Safety check to prevent out-of-bounds access

        vec3 lightPosition = uLightPositions[lightIndex];
        vec3 lightColor = uLightColors[lightIndex];

        vec3 lightDirection = normalize(lightPosition - worldPosition);
        float distanceToLight = length(lightPosition - worldPosition);

        //Simple Diffuse Lighting
        float diffuseIntensity = max(dot(normal, lightDirection), 0.0);
        vec3 diffuse = diffuseIntensity * lightColor * albedo;

        //Simple Specular Lighting
        vec3 reflectionDirection = reflect(-lightDirection, normal);
        float specularHighlight = pow(max(dot(reflectionDirection, normalize(-worldPosition)), 0.0), shininess);
        vec3 specular = specularIntensity * specularHighlight * specularData.rgb * lightColor;

        float attenuation = 1.0 / (distanceToLight * distanceToLight); // Simple attenuation


        finalColor += (diffuse + specular) * attenuation;
  }

  outColor = vec4(finalColor, 1.0);
}

ข้อควรพิจารณาที่สำคัญ

• Cluster Size: การเลือกขนาดคลัสเตอร์เป็นสิ่งสำคัญ คลัสเตอร์ขนาดเล็กให้การคัดกรองที่ดีกว่า แต่เพิ่มจำนวนคลัสเตอร์และค่าใช้จ่ายในการจัดการรายการแสงของคลัสเตอร์ คลัสเตอร์ขนาดใหญ่ช่วยลดค่าใช้จ่าย แต่ส่งผลให้มีการพิจารณาแสงต่อพิกเซลมากขึ้น การทดลองเป็นกุญแจสำคัญในการค้นหาขนาดคลัสเตอร์ที่เหมาะสมที่สุดสำหรับฉากของคุณ
• Light Assignment Optimization: การปรับปรุงประสิทธิภาพกระบวนการกำหนดแสงเป็นสิ่งจำเป็นสำหรับประสิทธิภาพ การใช้โครงสร้างข้อมูลเชิงพื้นที่ (เช่น ลำดับชั้นปริมาตรขอบเขต หรือกริด) สามารถเพิ่มความเร็วในกระบวนการค้นหาคลัสเตอร์ที่แสงตัดกันได้อย่างมาก
• Memory Bandwidth: ระลึกถึงแบนด์วิดท์ของหน่วยความจำเมื่อเข้าถึง G-buffer และรายการแสงของคลัสเตอร์ การใช้รูปแบบพื้นผิวและเทคนิคการบีบอัดที่เหมาะสมสามารถช่วยลดการใช้หน่วยความจำได้
• WebGL Limitations: WebGL เวอร์ชันเก่าอาจขาดคุณสมบัติบางอย่าง (เช่น อ็อบเจ็กต์บัฟเฟอร์ที่เก็บข้อมูล) พิจารณาใช้ส่วนขยายหรือแนวทางอื่นเพื่อจัดเก็บรายการแสง ตรวจสอบให้แน่ใจว่าการใช้งานของคุณเข้ากันได้กับเวอร์ชัน WebGL เป้าหมาย
• Mobile Performance: Clustered deferred lighting อาจมีการคำนวณที่เข้มข้น โดยเฉพาะอย่างยิ่งบนอุปกรณ์มือถือ โปรไฟล์โค้ดของคุณอย่างระมัดระวังและปรับให้เหมาะสมเพื่อประสิทธิภาพ พิจารณาใช้ความละเอียดที่ต่ำกว่าหรือแบบจำลองแสงที่ง่ายขึ้นบนมือถือ

เทคนิคการเพิ่มประสิทธิภาพ

สามารถใช้เทคนิคหลายอย่างเพื่อเพิ่มประสิทธิภาพ Clustered deferred lighting ใน WebGL เพิ่มเติม:

• Frustum Culling: ก่อนที่จะกำหนดแสงให้กับคลัสเตอร์ ให้ทำการคัดกรอง frustum เพื่อละทิ้งแสงที่อยู่นอก view frustum ทั้งหมด
• Backface Culling: คัดกรองสามเหลี่ยมด้านหลังในระหว่างการส่งผ่านเรขาคณิตเพื่อลดปริมาณข้อมูลที่เขียนไปยัง G-buffer
• Level of Detail (LOD): ใช้ระดับรายละเอียดที่แตกต่างกันสำหรับแบบจำลองของคุณตามระยะห่างจากกล้อง สิ่งนี้สามารถลดปริมาณเรขาคณิตที่ต้องเรนเดอร์ได้อย่างมาก
• Texture Compression: ใช้เทคนิคการบีบอัดพื้นผิว (เช่น ASTC) เพื่อลดขนาดของพื้นผิวและปรับปรุงแบนด์วิดท์ของหน่วยความจำ
• Shader Optimization: ปรับโค้ด shader ของคุณให้เหมาะสมเพื่อลดจำนวนคำสั่งและปรับปรุงประสิทธิภาพ ซึ่งรวมถึงเทคนิคต่างๆ เช่น การคลี่คลายลูป การกำหนดเวลาคำสั่ง และการลดการแตกแขนง
• Precomputed Lighting: พิจารณาใช้เทคนิคแสงที่คำนวณไว้ล่วงหน้า (เช่น lightmaps หรือ spherical harmonics) สำหรับอ็อบเจ็กต์แบบคงที่เพื่อลดการคำนวณแสงแบบเรียลไทม์
• Hardware Instancing: หากคุณมีหลายอินสแตนซ์ของอ็อบเจ็กต์เดียวกัน ให้ใช้ฮาร์ดแวร์อินสแตนซ์เพื่อเรนเดอร์ได้อย่างมีประสิทธิภาพมากขึ้น

ทางเลือกและการแลกเปลี่ยน

ในขณะที่ Clustered deferred lighting มีข้อดีที่สำคัญ สิ่งสำคัญคือต้องพิจารณาทางเลือกและการแลกเปลี่ยนที่เกี่ยวข้อง:

• Forward Rendering: ในขณะที่มีประสิทธิภาพน้อยกว่าเมื่อมีแสงจำนวนมาก การเรนเดอร์ไปข้างหน้าอาจใช้งานได้ง่ายกว่าและอาจเหมาะสมสำหรับฉากที่มีแหล่งกำเนิดแสงจำนวนจำกัด นอกจากนี้ยังช่วยให้โปร่งใสได้ง่ายขึ้น
• Forward+ Rendering: Forward+ rendering เป็นทางเลือกแทนการเรนเดอร์แบบดีเฟอร์ (Deferred rendering) ซึ่งใช้ compute shaders เพื่อทำการคัดกรองแสงก่อนการส่งผ่านการเรนเดอร์ไปข้างหน้า สิ่งนี้สามารถให้ประโยชน์ด้านประสิทธิภาพที่คล้ายคลึงกับ Clustered deferred lighting อาจมีความซับซ้อนในการใช้งานมากกว่า และอาจต้องใช้คุณสมบัติฮาร์ดแวร์เฉพาะ
• Tiled Deferred Lighting: Tiled deferred lighting แบ่งหน้าจอออกเป็นไทล์ 2 มิติ แทนที่จะเป็นคลัสเตอร์ 3 มิติ สิ่งนี้อาจใช้งานได้ง่ายกว่า Clustered deferred lighting แต่ประสิทธิภาพอาจน้อยกว่าสำหรับฉากที่มีความแปรผันของความลึกอย่างมีนัยสำคัญ

ตัวเลือกของเทคนิคการเรนเดอร์ขึ้นอยู่กับข้อกำหนดเฉพาะของแอปพลิเคชันของคุณ พิจารณาจำนวนแหล่งกำเนิดแสง ความซับซ้อนของฉาก และฮาร์ดแวร์เป้าหมายเมื่อทำการตัดสินใจ

บทสรุป

WebGL clustered deferred lighting เป็นเทคนิคที่ทรงพลังสำหรับการจัดการสถานการณ์แสงที่ซับซ้อนในแอปพลิเคชันกราฟิกบนเว็บ ด้วยการคัดกรองแสงอย่างมีประสิทธิภาพและลด overdraw จึงสามารถปรับปรุงประสิทธิภาพการเรนเดอร์และความสามารถในการปรับขนาดได้อย่างมาก ในขณะที่การใช้งานอาจซับซ้อน แต่ประโยชน์ในด้านประสิทธิภาพและคุณภาพของภาพทำให้เป็นความพยายามที่คุ้มค่าสำหรับแอปพลิเคชันที่มีความต้องการสูง เช่น เกม การจำลอง และการแสดงภาพ การพิจารณาขนาดคลัสเตอร์ การปรับปรุงประสิทธิภาพการกำหนดแสง และแบนด์วิดท์ของหน่วยความจำอย่างรอบคอบเป็นสิ่งสำคัญเพื่อให้ได้ผลลัพธ์ที่ดีที่สุด

เมื่อ WebGL พัฒนาอย่างต่อเนื่องและความสามารถของฮาร์ดแวร์ดีขึ้น Clustered deferred lighting มีแนวโน้มที่จะกลายเป็นเครื่องมือที่สำคัญมากขึ้นสำหรับนักพัฒนาที่ต้องการสร้างประสบการณ์ 3 มิติบนเว็บที่สวยงามตระการตาและมีประสิทธิภาพ

แหล่งข้อมูลเพิ่มเติม

• WebGL Specification: https://www.khronos.org/webgl/
• OpenGL Insights: หนังสือที่มีบทเกี่ยวกับเทคนิคการเรนเดอร์ขั้นสูง รวมถึง deferred rendering และ clustered shading
• Research Papers: ค้นหาเอกสารทางวิชาการเกี่ยวกับ clustered deferred lighting และหัวข้อที่เกี่ยวข้องใน Google Scholar หรือฐานข้อมูลที่คล้ายกัน